import React, { Component } from 'react'
import Swiper from 'swiper';
import 'swiper/css/swiper.css';
export default class MySwiper extends Component {
    componentDidMount() {
        new Swiper('.swiper-container', {
            autoplay: {
                delay: 2000,
                disableOnInteraction: false
            },
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })
    }
    componentDidUpdate(){
        new Swiper('.swiper-container', {
            autoplay: {
                delay: 2000,
                disableOnInteraction: false
            },
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })
    }
    render() {
        return (
            <div className='myswiper'>
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        {this.props.list.length>0&&
                        this.props.list.map((item,index)=>{
                            return(
                                 <div className="swiper-slide" key={index}>
                                     <img src={item.pic} alt=""/>
                                 </div>
                            )
                        })}
                       
                    </div>
                    {/* <!-- 如果需要分页器 --> */}
                    <div className="swiper-pagination"></div>
                </div>
            </div>
        )
    }
}
